<template>
  <div class="search">
    <!-- 顶部栏 -->
    <div class="topBar">
      <!-- Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。 -->
      <form action="/">
        <van-search
          v-model="userInp"
          show-action
          background="#3296fa"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          @focus="isResultShow=false"
        />
      </form>
    </div>

    <div class="search_list">
      <!-- 搜索结果 -->
      <search-result v-if="isResultShow" :keyword="userInp"></search-result>
      <!-- 搜索联想  此时的$event就是默认为传过来的参数 -->
      <search-associate v-else-if="userInp" :keyword="userInp" @ASSOCIATE="onSearch"></search-associate>
      <!-- 历史记录 -->
      <search-history v-else @HISTORY_EVENT="onSearch"></search-history>
    </div>
  </div>
</template>

<script>
import SearchHistory from "@/views/home/search/components/search-history";
import SearchAssociate from "@/views/home/search/components/search-associate";
import SearchResult from "@/views/home/search/components/search-result";
import { getItem, setItem } from "@/api/storage";
export default {
  name: "search",
  components: {
    SearchHistory,
    SearchAssociate,
    SearchResult,
  },
  data() {
    return {
      userInp: "",
      isResultShow: false, //展示搜索结果组件
    };
  },
  methods: {
    async onSearch(e) {
      // 触发搜索时。将搜索的结果显示出来
      this.isResultShow = true;
      // 将传入的参数显示在inpu输入框中
      this.userInp = e;

      // 保存历史记录
      // 判断状态
      if (this.isLogin) {
        //登录===>isLOgin  ====>有toke
      } else {
        // 获取本地历史记录数据
        let arr =getItem("keywords") || []
        //获取历史记录里面已有的记录索引值，然后将其删除。在添加到数组第一个
        const index = arr.findIndex((item) => {
          return item == this.userInp;
        });
        if (index !== -1) {
          // 找到
          arr.splice(index, 1);
        }
        // 为空或者没找到，都需要添加
        arr.unshift(this.userInp);
        // 保存本地
        setItem("keywords", arr);
      }
    },
    // 取消===返回首页
    onCancel() {
      this.$router.back();
    },
  },
  created() {},
  //监听token，判断是否登录
  computed: {
    isLogin() {
      return this.$store.state.login.userToken;
    },
  },
};
</script>

<style scoped lang='less'>
.search {
  .topBar {
    height: 108px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    .van-search__action {
      color: #fff;
    }
  }

  .search_list {
    width: 100%;
    position: absolute;
    top: 108px;
    left: 0;
    bottom: 0;
    overflow: auto;
    .van-search__action {
      color: #fff;
    }
  }
}
</style>